<template>
	<view class="container">
		<image class="wgbg " mode="widthFix"
			src="https://mh.synhaier.com/uploads/upload/index/2024/08/17/965e41b81ad6217e053be3837b543b80.png"></image>
		<image class="goodBg" mode="aspectFit" :src="pageData.awardList[swiperCur].thumb"></image>
		<view style="z-index: 3; position: relative;">
			<view v-if="pageLoading" class="page-wrap-loading common_bg" :style="{
				  height:'100vh',
			    backgroundImage: `url(${imgBaseUrl}${'/static/gif/loading.gif'})`
			  }"></view>
			<view class="good" v-if="pageData">
				<view class="good-name overflowText1">
					{{pageData.awardList[swiperCur].title}}
				</view>
				<view class="good-sku">{{pageData.awardList[swiperCur].mark_title}}</view>
				<view class="good-price">
					￥<text>{{pageData.awardList[swiperCur].price}}</text>
					/张明信片
				</view>
				<view class="good-info">
					<image class="arrow-l"
						src="https://mh.synhaier.com/uploads/upload/index/2024/08/13/7372230751e612d9d94ffd91ba362c98.png"
						@click="swiperPrev"></image>
					<swiper @change="swiperChange" :current="swiperCur" class="img-list" autoplay circular>
						<swiper-item v-for="(item, i) in pageData.awardList" :key="i">
							<image class="good-img"
								src="https://mh.synhaier.com/uploads/upload/index/2024/08/17/0853af63b0e4fe8d57ab7bfffdf18b4d.png">
							</image>
						</swiper-item>

					</swiper>
					<image class="arrow-r"
						src="https://mh.synhaier.com/uploads/upload/index/2024/08/13/537d5bfbbd38d94a5bcdbf2eccb665b8.png"
						@click="swiperNext"></image>
				</view>
				<view class="good-page">
					当前：第{{swiperCur+1>9?swiperCur+1:`0${swiperCur+1}`}}箱 共{{pageData.awardList.length}}箱
				</view>
			</view>
			<scroll-view class="scroll-x" :scroll-x="true" v-if="pageData">
				<view class="list">
					<view class="li" v-for="(item,index) in pageData.awardList" :key="index"
						@click="changeSwiper(index)">
						<view class="li-good">
							<image class="li-img-box" v-if="active == index"
								src="https://mh.synhaier.com/uploads/upload/index/2024/08/13/ed6d916f46cd87b1deec104d548deff6.png">
							</image>
							<image class="li-img-box" v-else
								src="https://mh.synhaier.com/uploads/upload/index/2024/08/13/2e846d5c557d0fb328e26d79fe70cc03.png">
							</image>
							<image class="li-img" :src="item.thumb"></image>
						</view>
						<view class="li-info">
							<image class="li-info-box" v-if="active == index"
								src="https://mh.synhaier.com/uploads/upload/index/2024/08/13/0e7123462740399b4697eeddae8c8ba5.png">
							</image>
							<image class="li-info-box" v-else
								src="https://mh.synhaier.com/uploads/upload/index/2024/08/13/e2aacfb1b1a8a60dff6da3fda186558d.png">
							</image>
							<view class="li-num">02箱</view>
							<!-- <view class="li-pages">剩138张/共144张</view> -->
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="footer">
				<view></view>
				<image class="start"
					src="https://mh.synhaier.com/uploads/upload/index/2024/08/14/c217bc85a80e539db7b3847c96543b17.png"
					@click="onStart"></image>
				<view></view>
				<!-- 		<view class="records">
					<image class="records-icon"
						src="https://mh.synhaier.com/uploads/upload/index/2024/08/17/901d4633aa324376a98d8dcae3b7c168.png">
					</image>
					开奖记录
				</view> -->
			</view>
			<image v-if="!pageLoading" class="refresh"
				src="https://mh.synhaier.com/uploads/upload/index/2024/08/14/d02ca26b1ade968a41b919c92830fd00.png"
				@click="onRefresh"></image>
			<image v-if="!pageLoading" class="hg-box"
				src="https://mh.synhaier.com/uploads/upload/index/2024/08/14/767852c8c05d5e02a0cb164d06e0ebd5.png"
				@click="goHeGui"></image>

		</view>
		<uni-popup type="bottom" ref="allRefs">
			<scroll-view scroll-y="true" class="all" @scrolltolower="scrolltolower">
				<view class="all-title">
					<view class="all-title-name">全部商品</view>
				</view>
				<view class="all-list">
					<view class="all-li" v-for="item in  pageData.awardList" :key="item.id">
						<image class="all-li-img" :src="item.thumb"></image>
						<view class="all-li-price">零售价：{{item.price}}</view>
						<view class="all-li-name overflowText1">
							{{item.title}}
						</view>
						<view class="all-li-radit">概率：<text>{{item.show_rate}}%</text></view>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
		<uni-popup type="bottom" ref="buyRefs">
			<view scroll-y="true" class="buy-content">
				<view class="buy-title">{{orderData.box.title}}</view>
				<view class="buy-price">单价：
					<text>￥{{orderData.box.price}}</text>
				</view>
				<view class="buy-tabs">
					<view class="buy-tab" v-for="(item,index) in btnList" :key="item.id"
						:class="{buyCount:buyCount==item.id}" @click="createOrder(item.id,'change')">购{{item.title}}张
					</view>

					<!-- <view class="buy-tab" @click="buyCount = 1">全包</view> -->
				</view>
				<view class="buy-agree" @click="changeRead"
					style="display: flex;align-items: center;justify-content:left ;color:#000">
					<radio :checked="hasRead" color="#27b195" style="transform: scale(.7);" />
					我已阅读并同意
					<view @click="goRule(2)" style="color: #27B195;">
						《购买说明》
					</view>
				</view>
				<view class="buy-coupon">
					<view>可用优惠券</view>
					<text v-if="!couponList||couponList.length<=0||way=='yue'">暂无可用优惠券></text>
					<text v-else>
						<text @click="showCoupon"
							v-if="couponList[useIndex].money*1<orderData.discount.total_money*1">{{couponList[useIndex].money}}元</text>
					</text>
				</view>
				<!-- <view class="buy-poins">
					<text>乐酷币抵扣：</text>
					<text>￥0.00</text>
				</view> -->
				<radio-group @change="radioChange">

					<view class="radio" style="margin-bottom: 20rpx;"
						v-if="userInfo.money*1>=orderData.discount.total_money*1">钻石支付
						<radio value="yue" :checked="way=='yue'" />
					</view>
					<view class="radio" style="margin-bottom: 20rpx;">微信支付
						<radio value="wechat" :checked="way=='wechat'" />
					</view>
				</radio-group>
				<view class="buy-amount">
					小计：
					<text>￥{{orderData.discount.pay_money}}</text>
				</view>
				<view class="buy-agree" @click="changeRead"
					style="display: flex;align-items: center;justify-content: center;;color:#000">
					<radio :checked="hasRead" color="#27b195" style="transform: scale(.7);" />
					我已阅读并同意
					<view @click="goRule(2)" style="color: #27B195;">
						《购买说明》
					</view>
				</view>
				<view class="buy-btn" @click="handleBuy">{{money>=orderData.discount.total_money?'确认购买':'确认购买'}}</view>

			</view>
		</uni-popup>
		<uni-popup ref="coupon" type="bottom">
			<view class="coupon-content">
				<scroll-view :scroll-y="true" class="list">
					<view class="li" v-for="(item,index) in couponList"
						v-if="item.money*1<orderData.discount.total_money*1" :key="item.id" @click="choose(index)">
						<view class="left">
							<view class="count"><text>￥</text>{{item.money}}</view>
							<view class="txt">优惠券</view>
						</view>
						<view class="right">
							<view class="title">{{item.money}}元优惠券</view>
							<view class="type">
								全场通用
							</view>
							<view class="time">领取后48小时内有效</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				way: 'yue',
				active: 0,
				optionsData: '',
				pageData: null,
				ruleData: null,
				pageLoading: true,
				userInfo: null,
				swiperCur: 0,
				listData: [],
				buyCount: 1,
				money: 0,
				baoTotal: 0,
				btnList: [],
				baoList: [{
					id: '',
					title: '全部',
					rate: 100
				}],
				orderData: '',
				hasRead: false,
				couponList: null,
				useIndex: 0
			}
		},

		onLoad(options) {
			if (options.scene) {
				let arr = options.scene.split('_')
				this.optionsData = {
					userId: arr[1],
					id: arr[2]
				}
			} else {
				this.optionsData = options
			}

			this.$store.dispatch('getUserInfo').then(res => {
				console.log(res)
				this.userInfo = res.data
				console.log(this.userInfo.money)
			})
		},
		async onReady() {
			this.onRefresh()
			this.getCouponList()
		},
		methods: {
			choose(index) {
				this.useIndex = index
				this.$refs.coupon.close('bottom')
				this.createOrder(this.buyCount)
			},
			showCoupon() {
				this.$refs.coupon.open('bottom')
			},
			getCouponList() {
				const _this = this
				this.req({
					url: '/v1/box/useCoupon',
					success: res => {
						if (res.code == 200) {
							_this.couponList = res.data

						}
					}
				})
			},
			createOrder(draw_id, mode) {
				this.buyCount = draw_id
				if (mode == 'change') this.useIndex = 0
				let data = {
					id: this.pageData.box.id,
					draw_id: this.buyCount,
					invite_user_id: this.optionsData.userId || '',
					pay_type: 3,
					submit: 0,
					coupon_id: this.way != 'yue' && this.couponList && this.couponList.length >
						0 && this.orderData &&
						this.couponList[this.useIndex].money * 1 < this.orderData.discount.total_money * 1 ? this
						.couponList[this.useIndex]
						.id : 0
				}
				this.req({
					url: '/v1/box/order',
					data,
					success: res => {
						if (res.code == 200) {
							this.orderData = res.data

						}
					}
				})
			},
			changeRead(e) {
				console.log(e);
				this.hasRead = !this.hasRead
			},
			async onRefresh() {
				this.$common.getRule(3, true).then(res => {
					this.ruleData = res
				})
				this.getLog()
				await this.getData()
				this.getDraw()
				// this.mescroll.resetUpScroll()
				// this.mescroll.scrollTo(0, 0)
				console.log('pageReady')
				this.$nextTick(() => {
					setTimeout(() => {
						this.pageLoading = false
					}, 1000)
				})
			},
			handleBuy() {
				if (!this.hasRead) {
					uni.showToast({
						title: "请阅读并同意《购买说明》",
						icon: 'none',
						mask: true
					})
					return
				}
				let data = {
					id: this.pageData.box.id,
					draw_id: this.buyCount,
					invite_user_id: this.optionsData.userId || '',
					pay_type: 3,
					submit: 1,
					coupon_id: this.way != 'yue' && this.couponList && this.couponList.length > 0 && this.couponList[
							this.useIndex]
						.money * 1 < this.orderData.discount.total_money * 1 ? this.couponList[this.useIndex].id : 0

				}
				console.log(this.way);

				if (this.way == 'yue') {
					data.discount_data = 1
				}
				this.req({
					url: '/v1/box/order',
					data,
					success: res => {
						if (res.code == 200) {
							if (res.data.pay_type == 2) {
								this.$refs.buyRefs.close()
								uni.navigateTo({
									type: 1,
									url: `/pages/index/draw?id=${this.pageData.box.id}&order_sn=${res.data.order_sn}&drawNum=${this.orderData.box.num}`,
								})
								return
							}
							this.$common.orderPay(res.data).then(res1 => {
								console.log(res1);
								this.$refs.buyRefs.close()
								uni.navigateTo({
									type: 1,
									url: `/pages/index/draw?id=${this.pageData.box.id}&order_sn=${res.data.order_sn}&drawNum=${this.orderData.box.num}`,
								})
							})
						}
					}
				})

			},
			radioChange(e) {
				console.log(e, 'a');
				this.way = e.detail.value
				this.createOrder(this.buyCount)
			},
			onStart() {
				this.$store.dispatch('getUserInfo').then((res) => {
					if (res.code == 200) {
						this.money = res.data.money
						if (this.money * 1 >= this.orderData.discount.total_money * 1) {
							this.way = 'yue'
						} else {
							this.way = 'wechat'
						}
						this.useIndex = 0
						this.createOrder(this.buyCount)
						this.$refs.buyRefs.open()
					}
				})
			},
			changeSwiper(index) {
				this.active = index
				// this.swiperCur = index
				this.$refs.allRefs.open()
			},
			/**
			 * @description: 轮播图切换
			 * @param {*} e
			 * @return {*}
			 */
			swiperPrev() {
				if (this.swiperCur == 0) {
					this.swiperCur = this.pageData.awardList.length - 1
					return
				}
				this.swiperCur -= 1
			},
			swiperNext() {
				if (this.swiperCur == this.pageData.awardList.length - 1) {
					this.swiperCur = 0
					return
				}
				this.swiperCur += 1
			},

			/**
			 * @description: 获取商品列表数据
			 * @param {*}
			 * @return {*}
			 */
			getList({
				num,
				size
			}) {
				this.req({
					url: '/v1/box/award',
					data: {
						page: this.pageNo,
						per_page: this.pageSize,
						box_id: this.optionsData.id,
						mark_id: this.pageData.awardList[this.swiperCur].id
					},
					Loading: true,
					success: res => {
						if (res.code == 200) {
							this.baoTotal = res.data.totals
							if (this.pageNo == 1) {
								this.listData = []
							}

							this.listData = [...this.listData, ...res.data.data]
						}
					}
				})
			},
			scrolltolower() {

			},
			swiperChange(e) {
				this.swiperCur = e.detail.current
			},
			getDraw() {
				return new Promise((resolve, reject) => {
					this.req({
						url: '/v1/box/draw',
						data: {},
						Loading: true,
						success: res => {
							if (res.code == 200) {
								this.btnList = res.data
								this.createOrder(this.btnList[0].id, 'one')
								resolve()
							}
						}
					})
				})
			},
			/**
			 * @description: 获取数据
			 * @return {*}
			 */
			getData() {
				return new Promise((resolve, reject) => {
					this.req({
						url: '/v1/box/info',
						data: {
							id: this.optionsData.id
						},
						Loading: true,
						success: res => {
							if (res.code == 200) {
								this.pageData = res.data

								this.baoList.push(...res.data.box.markList)
								resolve()
							}
						}
					})
				})
			},
			/**
			 * @description: 中奖记录
			 * @return {*}
			 */
			getLog() {
				this.req({
					url: '/v1/box/log',
					data: {},
					Loading: true,
					success: res => {
						if (res.code == 200) {
							this.logList = res.data

						}
					}
				})
			},
			goHeGui() {
				uni.switchTab({
					url: '/package/mine/bag'
				})
			},
			goRule(e) {

				uni.navigateTo({
					url: `/pages/index/rule?id=${e}`

				})
				this.hasRead = true
				uni.setStorageSync('hasRead', true)

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;

		overflow-x: hidden;
		background-color: #000;

		.good {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.good-name {
				width: 624rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #FFFFFF;
				margin-bottom: 6rpx;
				text-align: center;
				padding-top: 20rpx;
			}

			.good-sku {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-bottom: 6rpx;
				line-height: 46rpx;
			}

			.good-price {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 28rpx;

				text {
					font-family: DIN BlackAlternate;
					font-weight: 400;
					font-size: 48rpx;
					color: #FFFFFF;
					line-height: 46rpx;
				}
			}

			.good-info {
				width: 100%;
				padding: 0 0 30rpx;
				margin-top: 78rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				position: relative;

				.arrow-l {
					width: 72rpx;
					height: 72rpx;
					position: absolute;
					left: 28rpx;
					top: 50%;
					transform: translateY(-50%);
					z-index: 2;
				}

				.img-list {
					width: 100%;
					height: 372rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.good-img {
						width: 500rpx;
						height: 372rpx;
						margin-left: 125rpx;
					}
				}


				.arrow-r {
					width: 72rpx;
					height: 72rpx;
					position: absolute;
					right: 28rpx;
					top: 50%;
					transform: translateY(-50%);
				}

			}

			.good-page {
				width: 344rpx;
				height: 70rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 66rpx;
				background: rgba(42, 52, 52, 0.6);
				border-radius: 36rpx;
				border: 2px solid #FFFFFF;
				text-align: center;
			}
		}

		.scroll-x {
			padding: 0 24rpx 0 0;

			.list {
				display: flex;
				align-items: center;
				padding: 72rpx 24rpx 68rpx;

				.li {
					margin-right: 20rpx;

					.li-good {
						width: 192rpx;
						height: 242.29rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 10rpx;

						.li-img-box {
							width: 192rpx;
							height: 242.29rpx;
							position: absolute;
							left: 0;
							top: 0;
						}

						.li-img {
							width: 179.5rpx;
							height: 220rpx;
						}
					}

					.li-info {
						width: 192rpx;
						height: 82rpx;
						position: relative;
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding-left: 20rpx;
						box-sizing: border-box;

						.li-info-box {
							width: 200rpx;
							height: 82rpx;
							position: absolute;
							left: 0;
							top: 0;
						}

						.li-num {
							height: 34rpx;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #FFFFFF;
							position: relative;
						}

						.li-pages {
							height: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 20rpx;
							color: #FFFFFF;
							position: relative;
						}
					}
				}

				.active {}
			}
		}

		.footer {
			width: 100%;
			padding: 70rpx 38rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.buy-desc {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;

				.buy-desc-icon {
					width: 25rpx;
					height: 25rpx;
					margin-right: 10rpx;
				}
			}

			.start {
				width: 304rpx;
				height: 124rpx;
			}

			.records {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;

				.records-icon {
					width: 25rpx;
					height: 25rpx;
					margin-right: 10rpx;
				}
			}
		}

		.refresh {
			width: 104rpx;
			height: 118rpx;
			position: absolute;
			right: 10rpx;
			top: 45%;
		}

		.hg-box {
			width: 124rpx;
			height: 58rpx;
			position: absolute;
			right: 0rpx;
			top: 15%;
		}
	}

	.all {
		width: 750rpx;
		height: 80vh;
		background: #F5F5F5;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 44rpx 30rpx;
		box-sizing: border-box;

		.all-title {
			margin-bottom: 22rpx;

			.all-title-name {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #000000;
			}

			.all-page {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #000000;

				text {
					color: #27B195;
				}
			}
		}

		.all-list {
			display: flex;
			flex-wrap: wrap;

			.all-li {
				width: 220rpx;
				height: 292rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 22rpx;
				margin-right: 15rpx;
				position: relative;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.all-li-img {
					width: 220rpx;
					height: 196rpx;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
				}

				.all-li-price {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 16rpx;
					color: #FFFFFF;
					line-height: 34rpx;
					background: #FF9100;
					border-radius: 6rpx;
					text-align: center;
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					padding: 4rpx 10rpx;
				}

				.all-li-name {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
					padding: 10rpx 12rpx;
					box-sizing: border-box;
				}

				.all-li-radit {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 20rpx;
					color: #27B195;
					padding: 0 12rpx;
					box-sizing: border-box;

					text {
						color: #27B195;
					}
				}
			}
		}

	}

	.buy-content {
		width: 752rpx;
		height: 70vh;
		background: #F5F5F5;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 60rpx 28rpx;
		box-sizing: border-box;

		.buy-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
		}

		.buy-price {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 30rpx;

			text {
				font-family: DIN BlackAlternate;
				font-weight: 400;
				font-size: 48rpx;
				color: #FF0000;
			}
		}

		.buy-tabs {
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.buy-tab {
				width: 160rpx;
				height: 78rpx;
				text-align: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				line-height: 78rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
			}
		}

		.buy-coupon {
			width: 696rpx;
			height: 78rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;

			text {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.buy-poins {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 40rpx;

			text {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}
		}

		.buy-amount {
			text-align: right;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FF0000;

			text {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #FF0000;
			}
		}

		.buy-btn {
			width: 696rpx;
			height: 92rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			background: #27B195;
			border-radius: 92rpx;
			margin-top: 38rpx;
			text-align: center;
		}

		.buy-agree {
			text-align: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #27B195;
			margin-top: 22rpx;

			text {
				color: #27B195;
			}
		}

		.buyCount {
			background-color: #27B195 !important;
			color: #fff !important;
		}
	}

	.goodBg {
		width: 100vw;
		position: absolute;
		left: 0;
		top: 0;
	}

	.wgbg {
		width: 100vw;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;

	}

	.radio {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.coupon-content {
		width: 100vw;
		height: 70vh;
		background-color: #fff;
		padding-top: 40rpx;

		.list {
			width: 100%;
			height: calc(100% - 100rpx);
			position: relative;
			z-index: 3;

			.li {
				width: 90%;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				margin-bottom: 40rpx;
				box-shadow: 0 0 15rpx #aaa;
				margin-left: 5%;

				.left {
					width: 35%;
					border-right: 1rpx dashed #ddd;
					color: #da250f;
					text-align: center;

					.count {
						font-size: 44rpx;
						font-weight: bold;

						text {
							font-size: 26rpx;
						}
					}

					.txt {
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

				.right {
					width: 65%;
					padding-left: 20rpx;
					box-sizing: border-box;

					.title {
						font-size: 28rpx;
						color: #000;
					}

					.type {
						width: 100rpx;
						margin: 10rpx 0;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 30rpx;
						border: 1rpx solid #d09069;
						color: #d09069;
						padding: 0rpx 10rpx;
						font-size: 20rpx;
					}

					.time {
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
